<template>
	<view>
		<u-row>
			<u-col span="12" style="padding: 0;">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<image style="width: 100%;height: 100%;" :src="src" mode="scaleToFill"></image>
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</u-col>
			<u-col span="12" style="padding: 0;box-shadow:0px -5px 10px -5px #ccc;height: 12vh;line-height: 12vh;">
				<u-row>
					<u-col span="5" text-align="center">
						<u-number-box size="40" :min='1' v-model="value" @change="valChange" :input-width="100" :input-height="60"
						 bg-color='#FAFAFA'></u-number-box>
						<text style="margin-left: 10rpx;font-size: 40rpx;">局</text>
					</u-col>
					<u-col span="3" text-align="center">
						<text style="color: red;margin-right: 10rpx;font-size: 40rpx;">{{money}}元</text>
					</u-col>
					<u-col span="4" text-align="center">
						<u-button :custom-style="customStyle" shape="circle" @click='changeBtn' size="medium" :ripple="true" type="warning">下单</u-button>
					</u-col>
				</u-row>
			</u-col>
		</u-row>
		<u-popup v-model="show" mode="bottom" :closeable='true' height='70%' border-radius="14">
			<view class="" style="padding-top: 50rpx;">
				<u-row>
					<u-col span="12" text-align="center">
						<view style="margin: 50rpx 0;">
							<text style="font-size: 30rpx;font-weight: 600;margin-right: 10rpx;">￥</text>
							<text style="font-size: 60rpx;">{{money}}</text>
						</view>
					</u-col>
					<u-col span="12">
						<view style="padding: 0 20rpx;">
							<u-row>
								<u-col span="6" text-align="left">
									<text>商品名称</text>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #999;">嘿侍陪玩</text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="12">
						<view style="padding: 0 20rpx;margin-top: 20rpx;">
							<u-row>
								<u-col span="6" text-align="left">
									<text>陪玩局数</text>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #999;">{{value}}局</text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="12">
						<view style="padding: 0 20rpx;margin-top: 20rpx;">
							<u-row>
								<u-col span="6" text-align="left">
									<text>陪玩单价</text>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #999;">{{price}}.00元/局</text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="12">
						<view style="padding: 0 20rpx;margin-top: 20rpx;">
							<u-row>
								<u-col span="6" text-align="left">
									<text>用户手机号</text>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #999;">{{mobile}}</text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="12" text-align="center">
						<view style="padding: 0 20rpx;margin-top: 20rpx;">
							<u-row>
								<u-col span="6" text-align="left">
									<text>订单号</text>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #999;">1150154024851205</text>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="12" text-align="center">
						<button @tap="goCharge" :class="{isCol:isDis}" style="margin-top: 200rpx;width: 94%;color: #fff;background-color:#fabc12;"
						 :disabled='isDis'>确认下单</button>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				show: false,
				isDis: false,
				price: '',
				money: '10.00',
				scrollTop: 0,
				value: 1,
				mobile: '',
				src: '../../static/hb.jpg',
				customStyle: {
					fontSize: '40rpx',
				}
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.title = option.title;
			this.price = option.price;
			this.money = Number(this.value) * Number(this.price);
			this.money = this.money.toFixed(2);
			uni.setNavigationBarTitle({
				title: this.title
			});
			wx.setNavigationBarTitle({
				title: this.title
			});
			// #ifdef MP-WEIXIN
			this.mobile = wx.getStorageSync('myMobile')
			let that = this;
			if (this.mobile != "") {
				wx.request({
					url: "https://98game.9w9w.cn/api.php/user/getUserInfoByMobile",
					method: "POST",
					data: {
						mobile: this.mobile
					},
					success: function(res) {
						if (res.data.code == "success") {
							let userText = res.data.data;
							wx.setStorageSync('openid', userText.openid)
						}
					}
				});
			}
			// #endif
		},
		methods: {
			changeBtn() {
				if (!this.mobile) {
					wx.showToast({
						title: '请先登录!',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				this.show = true;
			},
			goCharge() {
				this.isDis = true;
				// #ifdef MP-WEIXIN
				//发起网络请求
				let openid = wx.getStorageSync('openid');
				let that = this;
				wx.request({
					url: 'https://98game.9w9w.cn/api.php/pay/payWxMinipg',
					method: "POST",
					data: {
						subject: "嘿侍陪玩消费" + that.money + "元",
						total_amount: that.money,
						out_trade_no: that.randomNumber(),
						mobile: this.mobile,
						openid: openid,
					},
					success: res => {
						if (res.data.code == "success") {
							let returnData = JSON.parse(JSON.parse(res.data.data));
							let returnObj = JSON.parse(returnData.ysepay_online_weixin_pay_response.jsapi_pay_info)
							wx.requestPayment({
								"timeStamp": returnObj.timeStamp, //时间戳 这里随意使用了一个值
								"nonceStr": returnObj.nonceStr, //随机串
								"package": returnObj.package,
								"signType": returnObj.signType, //签名方式:RSA
								"paySign": returnObj.paySign,
								success: function(res) {
									wx.showToast({
										icon: 'success',
										title: '支付成功',
										success: function() {
											wx.request({
												url: "https://98game.9w9w.cn/api.php/user/getUserInfoByMobile",
												method: "POST",
												data: {
													mobile: that.mobile
												},
												success: function(res) {
													if (res.data.code == "success") {
														let userText = res.data.data;
														that.money = userText.reward_money
													}
												}
											});
										}
									})
									that.isDis = false
								},
								fail: function(res) {
									if (res.errMsg == "requestPayment:fail cancel") {
										wx.showToast({
											icon: 'none',
											title: '用户取消支付',
										})
										that.isDis = false
									}
								}
							});
						} else {
							wx.showToast({
								'title': res.data.msg,
								'icon': 'none'
							})
							return false;
						}
					}
				})
				//#endif
			},
			valChange() {
				this.money = Number(this.value) * Number(this.price);
				this.money = this.money.toFixed(2);
			},
			randomNumber() {
				const now = new Date()
				let month = now.getMonth() + 1
				let day = now.getDate()
				let hour = now.getHours()
				let minutes = now.getMinutes()
				let seconds = now.getSeconds()
				month = this.setTimeDateFmt(month)
				hour = this.setTimeDateFmt(hour)
				minutes = this.setTimeDateFmt(minutes)
				seconds = this.setTimeDateFmt(seconds)
				return now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() *
					89 + 100)).toString()
			},
			setTimeDateFmt(s) { // 个位数补齐十位数
				return s < 10 ? '0' + s : s;
			}
		}
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: 88vh;
	}

	.isCol {
		background-color: #ccc !important;
	}
</style>
